<template>
  <div v-if="addon.id" class="app-container">
    <div class="install-header">
      <div class="addon-logo">
        <img :src="addon.icon_image" alt="" />
      </div>
      <div class="addon-title">
        <b>{{ addon.title }}</b>
      </div>
      <div class="description" v-html="description" />
      <div class="button">
        <el-button type="danger" icon="Download" class="h-50px w-200px" @click="onHandleClickDownAddon">下载并安装 </el-button>
      </div>
      <div class="mx-auto max-w-750px min-h-40px mt-10px mb-10px">
        <el-progress v-if="percentage > 0" :text-inside="true" :stroke-width="20" :percentage="percentage" status="exception" />
        <p class="p-10">{{ loadingText }}</p>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="安装完成"
      width="500"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-result icon="success" title="安装完成" sub-title="请选择应用组设置方式">
        <template #extra>
          <div class="flex gap-4 justify-center">
            <el-button type="primary" size="large" class="px-12" @click="handleAddToDefaultGroup">
              <el-icon class="mr-2"><CircleCheck /></el-icon>
              添加到默认应用组
            </el-button>
            <el-button size="large" @click="handleGoToSettings">
              <el-icon class="mr-2"><Setting /></el-icon>
              手动设置
            </el-button>
          </div>
        </template>
      </el-result>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { CircleCheck, Setting } from '@element-plus/icons-vue'
import { downAddon, getAddon } from '@/api/cloud/cloud'
import { addonInstall } from '@/api/addons'
import { addAddonToDefaultGroup } from '@/api/addonAuth'

defineOptions({
  name: 'AddonsInstallIndex'
})

const router = useRouter()
const route = useRoute()
const addon = ref({})
const percentage = ref(0)
const loadingText = ref('')
const timer = ref(null)
const dialogVisible = ref(false)

const description = computed(() => {
  return addon.value.install_content ?? addon.value.description
})

const name = computed(() => {
  return route.params.name
})

onMounted(() => {
  getAddon(route.params.name)
    .then((res) => {
      addon.value = res.data
    })
    .catch((res) => {
      router.push('/addons/list')
    })
})

const onHandleClickDownAddon = () => {
  loading()
  loadingText.value = '正在准备安装.....'
  downAddon(route.params.name)
    .then((res) => {
      loadingText.value = '正在下载......'
      ElMessage.success(res.msg)
      percentage.value = percentage.value + 50
      addonInstallFn()
    })
    .catch((res) => {
      end()
    })
}

const addonInstallFn = () => {
  loadingText.value = '下载完成执行安装......'
  addonInstall(name.value)
    .then((res) => {
      loadingText.value = '安装成功'
      percentage.value = 100
      // 停止进度条计时器
      clearInterval(timer.value)
      // 显示完成对话框
      dialogVisible.value = true
    })
    .catch((res) => {
      loadingText.value = '安装失败,' + res.msg
      ElMessage.alert(res.msg).then(() => {
        router.push('/addons/list')
      })
      end()
      console.log(res)
    })
}

const loading = () => {
  timer.value = setInterval(() => {
    percentage.value++
    if (percentage.value >= 100) {
      clearInterval(timer.value)
      // 这里不再自动显示对话框，等待安装完成
    }
  }, 500)
}

const end = () => {
  percentage.value = 0
  clearInterval(timer.value)
}

// 快捷添加到默认应用组
const handleAddToDefaultGroup = () => {
  addAddonToDefaultGroup(name.value)
    .then((res) => {
      ElMessage.success(res.msg || '已添加到默认应用组')
      router.push('/user/addon_group')
    })
    .catch((res) => {
      ElMessage.error(res.msg || '添加失败')
    })
}

// 手动设置应用组
const handleGoToSettings = () => {
  router.push('/user/addon_group')
}
</script>

<style scoped>
.app-container {
  @apply flex items-center min-h-[calc(100vh-140px)];
  background-image: linear-gradient(-45deg, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 90%) 100%),
    url(https://dkyx-1251560393.cos.ap-chengdu.myqcloud.com/uploads/20211031/8254e0187175fc189cbd01afabb7b5b4.jpg);
  background-size: auto 100%;
}

.install-header {
  @apply w-full text-center;
}

.addon-logo img {
  @apply w-100px h-100px rounded-full border-5 border-solid border-white;
}

.addon-title {
  @apply text-[#333] py-20px px-10px text-36px;
}

.description {
  @apply text-left mx-auto max-w-750px text-24px text-[#666] leading-32px;
}

.button {
  @apply py-40px px-20px;
}
</style>
